<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 嵌入zepto -->
    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
    <title>每日一笑</title>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        // 1. 绑定安全域名
        // 2. 引入js文件
        // 3. 通过config接口注入权限配置
        var jsApiList = [
            "onMenuShareQQ",
            "onMenuShareQZone",
            "startRecord",
            "stopRecord",
            "translateVoice"
        ]
        wx.config({
            debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
            timestamp: '<%=timestamp%>', // 必填，生成签名的时间戳
            nonceStr: '<%=noncestr%>', // 必填，生成签名的随机串
            signature: '<%=signature%>',// 必填，签名
            jsApiList, // 必填，需要使用的 JS 接口列表
            appId: '<%=appID %>', // 必填，公众号的唯一标识
        });
        wx.ready(function () {
            // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
            // 验证接口
            wx.checkJsApi({
                jsApiList, // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
                success: function (res) {
                    // 以键值对的形式返回，可用的 api 值true，不可用为false
                    console.log(res)
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                }
            });
            // 语音api的使用
            const btn = document.getElementById("btn")
            // 微信客户端并不支持ontouchstart，这里用click来进行代替
            let isRecord = false
            btn.onclick = () => {
                const url = "https://bird.ioliu.cn/joke/rand"
                $.getJSON(url, (res) => {
                    const { data } = res
                    _html = data.reduce((_pre, _cur) => {
                        const { content, url, hashId } = _cur
                        return _pre + `
                            <section>
                                <h2>${content}</h2>
                                <img style="width:100%;" src="${url}" alt="${hashId}">
                            </section>
                        `
                    }, "")
                    $("#content").html(_html)
                })
                // if (!isRecord) {
                //     wx.startRecord() // 开始录音
                //     isRecord = true
                // } else {
                //     wx.stopRecord({
                //         success: (res) => {
                //             // 拿到录音后，微信会把录音上传到微信服务器，然后返回给开发者一个id
                //             const { localId } = res
                //             wx.translateVoice({
                //                 localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                //                 isShowProgressTips: 1, // 默认为1，显示进度提示
                //                 success: function (res) {
                //                     isRecord = false
                //                     console.log(res)
                //                     alert(res.translateResult); // 语音识别的结果
                //                 }
                //             });
                //         }
                //     })
                // }

            }
            wx.updateAppMessageShareData({
                title: 'Hello World', // 分享标题
                desc: '这是一个分享的描述', // 分享描述
                link: 'www.baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl: 'https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1662915600&t=592266fa45259396c694296de6ce8bf9', // 分享图标
                success: function () {
                    // 设置成功
                    alert("分享成功~~~")
                }
            })

        });
        wx.error(function (res) {
            // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
        });
    </script>
</head>

<body>
    <h1>这是一个搜索页面</h1>
    <button id="btn">录音</button>
    <div id="content"></div>
</body>

</html>